<template>
  <el-dialog @opened="openDialog" :width="dialogWidth" :title="title"  :visible.sync="showDetail"  :show-close="true"  :close-on-click-modal="false"
>
  <table>
    <tbody>
      <tr v-for="(detail, index) in this.detail" :key="index">
        <td width="55%">
          <ul class="detail">
            <li><img :src="serverApiUrl + detail.product.imgurl">
            <span class="li_font"><h4>{{ detail.product.name }}</h4>
            <h4>{{detail.product.price}}元/500g</h4>
            <h4>   数量:{{ detail.quantity }}</h4>
            <h4>   {{ detail.money }}元</h4></span></li>
 
          </ul>
        </td>
      </tr>
    </tbody>
  </table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { resetObject } from "@/utils/common";
import { serverApiUrl } from '@/api/serverApiUrl';
import { getOrderByOrderIdApi } from '@/api/orderManage/getOrderList'


export default {
  props: {
    title: {
      type: String,
      default: "订单详情"
    },
    dialogWidth: {
      type: String,
      default: "700px"
    },
    labelWidth: {
      type: String,
      default: "120px"
    },
    showDetail: Boolean
  },
  data() {
    return {
      detail: [],
      orders:[],
      serverApiUrl:serverApiUrl,

    };
  },
  created(){
   
  },
  methods: {
      getOrderDetial() {
        getOrderByOrderIdApi({
          ordersId:this.$parent.selectedOrderId,
        }).then(resp=>{
          this.detail = resp.orderdetailets;
          console.log(resp)
        })
      },
    openDialog() {
       console.log(this.$parent.selectedOrderId);
        this.getOrderDetial();

    },

  }
};
</script>
<style scoped>

.detail{ 
  background-color: #f8f8f8;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  vertical-align: middle;
}
li {
  display: flex;
  align-items: center;
  list-style-type: none;
}

li img, li .li_font {
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
  margin-left: 5ch;
}
span{
  margin-left: 1ch;
}
</style>